<template>
<!--   刷新后图片换为原来的图片，因为重新加载了之前的query-->
  <div class="wrapper">
    <p v-if="isLogin">欢迎你:{{userInfo.name}}</p>
    <p v-if="!isLogin" @click="toLogin">未登录？点我登录</p>
    <div class="img_wrapper">
      <img :src="isLogin ?userInfo.imgUrl:'/images/饺子.jpg'">
    </div>
    <el-upload
        class="upload-demo"
        accept=".png,.jpg,.doc,.txt"
        action=""
        :http-request="uploadFile"
    >
<!--              :before-upload="beforeUpload"-->
      <el-button type="primary">想换头像点我上传</el-button>
      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500KB.
        </div>
      </template>
    </el-upload>
    <el-button @click="logOut">退出登录</el-button>
  </div>
  <TabBar></TabBar>
</template>

<script setup>
import TabBar from "@/components/common/TabBar";
import router from "@/router";
import {onMounted, ref} from "vue";
// import {ElMessage} from "element-plus";
import request from "@/utils/request";

onMounted(()=>{
  if(isLogin.value === true){
    userInfo.value=JSON.parse(localStorage.getItem('userLoginAll'))
  }
})
const isLogin =  ref(JSON.parse(localStorage.getItem('isLogin')))
const userInfo = ref({})
// async function onloadPic(file){
//
// }
async function uploadFile(params) {
  let { file } = params;
  let fd = new FormData()
  fd.append('file', file);
  fd.append('userId', userInfo.value.userId)
  let res =await request({url:'/user/update', method: 'post', data: fd})
  console.log(2,res.data)
  userInfo.value.userImg=res.data
  localStorage.setItem('userLoginAll',JSON.stringify(userInfo.value))
}
function toLogin(){
  router.push({name:"LoginPart"})
}
function logOut(){
  localStorage.setItem('isLogin','false')
  localStorage.removeItem('token')
  isLogin.value = false
}
</script>

<style scoped>
.wrapper {
  height: 50vh;
  margin: 3rem;
  /*background-color: #35c973;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.img_wrapper {
  height: 4rem;
  width: 4rem;
  border-top-width: 2px;
  border-style: solid;
  border-radius: 50%;
  overflow: hidden;
  border-color: #0097FF;
}
.img_wrapper img {
  height: 100%;
  width: 100%;
}
</style>